<template>
  <div class="pos">
    <van-swipe :autoplay="2000" v-if="info" class="my-swipe" :show-indicators="false" @change="swiperChange">
      <van-swipe-item v-for="(item, index) in info" :key="index">
        <img :src="item.url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="dar" v-if="info">{{current}}/{{info.length}}</div>
  </div>
</template>
<script>
export default {
  props: {
    info:{
      type:null
    }
  },
  data() {
    return {
      current:1
    };
  },
  mounted(){
  },
  methods:{
    swiperChange(e){
      this.current = e + 1;
    }
  }
};
</script>
<style lang="scss" scoped>
.pos {
  position: relative;

  img {
    width: 100%;
    height: auto;
    border-radius: 0.3125rem;
  }

  .dar {
    position: absolute;
    bottom: 1rem;
    right: 0.63rem;
    border-radius: 0.56rem;
    background: rgba($color: #000, $alpha: 0.6);
    color: #fff;
    padding: 0.22rem 0.34rem;
  }
}
</style>